<template>
<div style="padding: 10px">
   <div style="margin-bottom:10px;display:flex;justify-content: space-between;">
    <div class="top-left">
      <span> 分公司：</span>
      <a-dropdown  :trigger="['click']">
        <template #overlay>
          <a-menu @click="changeBuMen">
            <a-menu-item  v-for="(item,i) in bumenList" :key="i">
              {{item.value}}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button class="mytbn">
          {{bumenName}}
          <DownOutlined />
        </a-button>
      </a-dropdown>
      <span style="margin-left: 10px"> 年：</span>
      <a-dropdown  :trigger="['click']">
        <template #overlay>
          <a-menu @click="changeYear">
            <a-menu-item  v-for="(item,i) in yearList" :key="i">
              {{item}}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button class="mytbn">
          {{year}}
          <DownOutlined />
        </a-button>
      </a-dropdown>
     <span style="margin-left: 10px"> 月：</span>
      <a-dropdown  :trigger="['click']">
        <template #overlay>
          <a-menu @click="changeMonth">
            <a-menu-item  v-for="(item,i) in monthList" :key="i">
              {{item.name}}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button class="mytbn">
          {{monthList[monthId].name}}
          <DownOutlined />
        </a-button>
      </a-dropdown>
     
      <!-- <a-button type="primary" @click="search" style="margin-left: 10px">搜索</a-button> -->
    </div>
    <div class="top-right">
      <a-button type="primary" @click="export1">导出</a-button>
    </div>
  </div>
  
  <a-table
      :columns="columns"
      :data-source="datas"
      bordered
      size="middle"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
      :pagination='false'
      class="mytable"
      :rowClassName="setRowClassName"
      :loading="tbLoading"
    >
       <template #showMsg="{ text }">
        <a>{{ text }}</a>
      </template>
      <template #customTitle>
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
  </a-table>
  <!-- <div style="background-color: #ececec; padding: 20px" class="mycard">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card :title="bumenName+monthList[monthId].name+'月人员出差统计表'" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar1Loading"></a-spin>
            <div class="about main" id="main1"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card :title="'分公司'+monthList[monthId].name+'月出差统计表'" :bordered="false">
          <div class="echart-pic">
            <a-spin tip="Loading..." :spinning="echar2Loading"></a-spin>
            <div class="about main" id="main2"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div> -->
</div>
 
</template>
<script>
import { request } from "../../utils/request";
import { DownOutlined } from '@ant-design/icons-vue';

const bumenList = [{id:'',value:'所有部门'},{id:'137',value:'山东分公司'},{id:'138',value:'华东分公司'}];
const yearList = ['2021','2022','2023','2024','2025','2026','2027','2028','2029','2030'];
const year = new Date().getFullYear();
// const monthList = [{id:'',name:'所有月份'},{id:1,name:'一月份'},{id:2,name:'二月份'},{id:3,name:'三月份'},{id:4,name:'四月份'},{id:5,name:'五月份'},
// {id:6,name:'六月份'},{id:7,name:'七月份'},{id:8,name:'八月份'},{id:9,name:'九月份'},{id:10,name:'十月份'},{id:11,name:'十一月份'},{id:12,name:'十二月份'}]; 
const monthList = [{id:0,name:'一月份'},{id:1,name:'二月份'},{id:2,name:'三月份'},{id:3,name:'四月份'},{id:4,name:'五月份'},
{id:5,name:'六月份'},{id:6,name:'七月份'},{id:7,name:'八月份'},{id:8,name:'九月份'},{id:9,name:'十月份'},{id:10,name:'十一月份'},{id:11,name:'十二月份'}]; 
const monthName = '一月份';
const monthId = new Date().getMonth();
const bumenName = '所有部门';
const bumenId = '';
const dateString = '';
const personName = '';
const tbLoading = true;
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number',
    width:100
  },
  
   {
    title: '部门',
    dataIndex: 'deptname',
    key: 'deptname',
     width:150
  },
  {
    title: '姓名',
    dataIndex: 'lastname',
    key: 'lastname',
     width:120
  },
  {
    title: '本月工作日',
    dataIndex: 'ycqts',
    key: 'ycqts',
    width:100
  },
  {
    title: '本月出差天数',
    key: 'ccDays',
    dataIndex: 'ccDays',
    width:120
  },
  {
    title: '出差率',
    key: 'ccl',
    dataIndex: 'ccl',
    width:200
  },
  {
    title: '出差省份数',
    key: 'provinceCount',
    dataIndex: 'provinceCount',
    width:120
  },
  {
    title: '出差地级市数',
    key: 'cityCount',
    dataIndex: 'cityCount',
    width:120
  },
  {
    title: '出差地级市/天数',
    key: 'showMsg',
    dataIndex: 'showMsg',
  },
  {
    title: '分公司平均出差率',
    key: 'average',
    dataIndex: 'average',
    width:130
  
  },
];
const datas = [
  {
    number: 1,
    deptname: '山东分公司',
    name: '徐国玲',
    benyuegongzuoDay: '20',
    benyuechuchaiDay: '10',
    chuchailv: '20%',
    chuchaiProvinceNum: '10',
    chuchaiCityNum: '5',
    chuchaiCityandNum: ['A:100',"B:200"],
    average: '20%'
  },
  {
    number: 2,
    deptname: '山东分公司',
    name: '徐国玲',
    benyuegongzuoDay: '20',
    benyuechuchaiDay: '10',
    chuchailv: '20%',
    chuchaiProvinceNum: '10',
    chuchaiCityNum: '5',
    chuchaiCityandNum: ['A:100',"B:200"],
    average: '20%'
  },
   {
    number: 3,
    deptname: '山东分公司',
    name: '徐国玲',
    benyuegongzuoDay: '20',
    benyuechuchaiDay: '10',
    chuchailv: '20%',
    chuchaiProvinceNum: '10',
    chuchaiCityNum: '5',
    chuchaiCityandNum: ['A:100',"B:200"],
    average: '20%'
  },
   {
    number: 4,
    deptname: '山东分公司',
    name: '徐国玲',
    benyuegongzuoDay: '20',
    benyuechuchaiDay: '10',
    chuchailv: '20%',
    chuchaiProvinceNum: '10',
    chuchaiCityNum: '5',
    chuchaiCityandNum: ['A:100',"B:200"],
    average: '20%'
  }
];
export default {
 data() {
    return {
      columns,
      datas,
      bumenList, //部门列表
      bumenName, //部门名称
      bumenId, //部门id
      dateString,//休息日
      personName, //人员
      yearList,
      year,
      monthList,
      monthName,
      monthId,
      tbLoading,
      echar1Loading: true,
      echar2Loading: true,
    };
  },
  mounted(){
    this.init();
    
  },
  methods:{
    init(){
      
      this.getAllBumen();
      this.getDatas();
      this.echart2();
    },
    getAllBumen(){// 获取所有部门
      request({ 
          url: "/api/xswq/deptlist",
          method: "get",
        }).then((res)=>{
          this.bumenList = res;
          this.bumenList.unshift({id:'',value:'所有部门'});
      })
    },
    getDatas(){// 获取所有table
      this.tbLoading = true;
      this.echar1Loading= true,
      this.datas = [];
      request({ 
          url: `/api/xswq/finallist?year=${this.year}&month=${this.monthId+1}&dept=${this.bumenId}`,
          method: "get",
        }).then((res)=>{
          res.forEach((e,index)=>{
            if(e.lastname) {
               this.datas.push({
                  number: index+1,
                  deptname: e.deptname,
                  lastname: e.lastname,
                  ycqts: e.ycqts,
                  ccDays: e.ccDays, 
                  ccl: e.ccl + "%",
                  provinceCount: e.provinceCount,
                  cityCount: e.cityCount,
                  showMsg: e.showMsg,   
              })
            }else {
              this.datas.push({
                  number: index+ 1,
                  deptname: e.deptname,
                  lastname: "",
                  ycqts: "",
                  ccDays: "", 
                  ccl: "",
                  provinceCount: "",
                  cityCount: "",
                  showMsg: "",
                  average: e.ccl + "%"
              })
            } 
           
          })
          this.tbLoading = false;
          this.echart1();
      })
    },
    setRowClassName(record) {
      if (!record.lastname) {
        return "rowcolor";
      } else {
        return "rowcolor2";
      }
    },
    changeYear(e) {
      this.year = this.yearList[e.key]
      this.getDatas();
      this.echart2();
    },
    changeMonth(e) {
      this.monthName = this.monthList[e.key].name;
      this.monthId = this.monthList[e.key].id
      this.getDatas();
      this.echart2();
    },
    changeBuMen(e) {
      this.bumenName = this.bumenList[e.key].value;
      this.bumenId = this.bumenList[e.key].id;
      this.getDatas();
     
    },
    dateChange(date,dateString) {
      this.dateString = dateString;
     
    },
    search(){
      this.nianxiujia();
    },
    export1(){
      request({
          url: `/api/xswq/finalexportlist?year=${this.year}&month=${this.monthId}&dept=${this.bumenId}`,
          method: "get",
        }).then((res) => {
          window.location.href = `api` + res;
        });
    },
    
    echart1() {
      const person = []; //人
      const benyuegongzuoDay = []; //本月工作日
      const benyuechuchaiDay = []; //本月出差天数
      const chuchaishengfenNum = []; //出差省份个数
      const chuchaidijishiNum = []; //出差地级市个数
      const chuchailv = []; //出差率
      // const score = [];
      this.echar1Loading = false;
      this.datas.forEach(v=>{
        if(this.bumenName == '所有部门' && v.lastname) {
          person.push(v.lastname);
          benyuegongzuoDay.push(v.ycqts);
          benyuechuchaiDay.push(v.ccDays);
          chuchaishengfenNum.push(v.provinceCount);
          chuchaidijishiNum.push(v.cityCount);
          chuchailv.push(v.ccl.split('%')[0])
        }
        if(this.bumenName != '所有部门' && v.deptname == this.bumenName && v.lastname){
          person.push(v.lastname);
          benyuegongzuoDay.push(v.ycqts);
          benyuechuchaiDay.push(v.ccDays);
          chuchaishengfenNum.push(v.provinceCount);
          chuchaidijishiNum.push(v.cityCount);
           chuchailv.push(v.ccl.split('%')[0])
        }
      })
      console.log(chuchailv,"vvv")
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = this.$echarts.init(document.getElementById("main1"));
      // 绘制图表
      myChart1.setOption({
        tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
          color: '#999'
          }
        }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['本月工作日', '本月出差天数', '出差省份个数','出差地级市个数','出差率']
        },
        xAxis: [
          {
            type: 'category',
            data: person,
            axisPointer: {
              type: 'shadow'
            },
            
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '天数',
            min: 0,
            max: 31,
            interval: 5,
             splitLine:{
              show:false
            },
            axisLabel: {
              formatter: '{value}'
            },
          },
          {
            type: 'value',
            name: '出差率',
            min: 0,
            max: 200,
            interval: 10,
            show:true,
           
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],    
        series: [
              {
                name: '本月工作日',
                type: 'bar',
                label:{
                  normal:{
                    show: true
                  }
                },
                data: benyuegongzuoDay
              },
              {
                name: '本月出差天数',
                type: 'bar',
                label:{
                  normal:{
                    show: true
                  }
                },
                data: benyuechuchaiDay
              },
              {
                name: '出差省份个数',
                type: 'bar',
                label:{
                  normal:{
                    show: true
                  }
                },
                data: chuchaishengfenNum
              },
              {
                name: '出差地级市个数',
                type: 'bar',
                label:{
                  normal:{
                    show: true
                  }
                },
                data: chuchaidijishiNum
              },
              {
                name: '出差率',
                type: 'line',
                label:{
                  normal:{
                    show: true
                  }
                },
                yAxisIndex: 1,
                data: chuchailv
              }
            ]
        });
    },
    echart2() {
       const personBumen = []; //部门
       const chuchailv = []; //出差率
       request({ 
          url: `/api/xswq/finallist?year=${this.year}&month=${this.monthId+1}`,
          method: "get",
        }).then((res)=>{
          res.forEach((e)=>{
            if(!e.lastname) {
               personBumen.push(e.deptname);
               chuchailv.push(e.ccl)
            }
          })
           // 基于准备好的dom，初始化echarts实例
            var myChart2 = this.$echarts.init(document.getElementById("main2"));
            // 绘制图表
            myChart2.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                  color: '#999'
                  }
                }
              },
              xAxis: {
                type: 'category',
                data: personBumen
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  data: chuchailv,
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'top'
                  },
                }
              ]
            });
            this.echar2Loading = false;
        })
     
      },
    },
    components: {
      DownOutlined,
    },
};
</script>
<style scoped>
 :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
.ant-dropdown-menu {
   height: 150px;
   overflow: auto;
}
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
.main {
  height: 400px;
  width: 100%;
}
.echart-pic {
  height: 400px;
  width: 100%;
  line-height: 400px;
  text-align: center;
  overflow: hidden;
}
.mycard .ant-col { 
  margin-bottom: 10px;
}
/deep/ .ant-table-row-cell-break-word {
  text-align: center;
}
/deep/ .rowcolor {
  background: #daeef3;
}
</style>